const n = `
<template>
  <s-form label-width="10em" colon="：">
    <s-form-item label="标签变体">
      <s-radio-group v-model="options.variant" :options="variantList"></s-radio-group>
    </s-form-item>
    <s-form-item label="标签形状">
      <s-radio-group v-model="options.shape" :options="shapeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否可关闭">
      <s-radio-group
        v-model="options.closeable"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="是否显示图标">
      <s-radio-group
        v-model="options.icon"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      ></s-radio-group>
    </s-form-item>
    <s-form-item label="标签示例">
      <div :style="{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }">
        <s-tag
          v-for="tag of themeList"
          :key="\`tag-\${tag.theme}\`"
          :icon="options.icon ? 'tag' : undefined"
          :variant="options.variant"
          :shape="options.shape"
          :theme="tag.theme"
          :closeable="options.closeable"
          @close="handleTagClose"
          >{{ tag.label }}标签</s-tag
        >
      </div>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  MessageCommand,
  TAG_SHAPE_DEFAULT,
  TAG_SHAPE_LABEL,
  TAG_SHAPE_OPTIONS,
  TAG_THEME_LABEL,
  TAG_THEME_OPTIONS,
  TAG_VARIANT_DEFAULT,
  TAG_VARIANT_LABEL,
  TAG_VARIANT_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class TagDemo extends Vue {
  /**
   * @description: 变体列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly variantList = TAG_VARIANT_OPTIONS.map((variant) => ({
    label: TAG_VARIANT_LABEL.get(variant),
    value: variant,
  }));

  /**
   * @description: 形状列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly shapeList = TAG_SHAPE_OPTIONS.map((shape) => ({
    label: TAG_SHAPE_LABEL.get(shape),
    value: shape,
  }));

  /**
   * @description: 主题列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = TAG_THEME_OPTIONS.map((theme) => ({
    theme,
    label: TAG_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    variant: TAG_VARIANT_DEFAULT, // 标签变体
    shape: TAG_SHAPE_DEFAULT, // 标签形状
    icon: false, // 是否显示图标
    closeable: false, // 是否可关闭
  };

  /**
   * @description: 处理标签关闭
   * @private
   * @returns
   */
  handleTagClose(): void {
    MessageCommand.success("您点击了标签关闭");
  }
}
<\/script>
`; export { n as default };
